<template>
    <!-- 只能有一个根元素 多个报错 -->
    <div class="work-1">
       <div class="list">
           <div class="item" v-for="(d,i) in list" :key="d.id">
               <img :src="d.cover" />
               <div class="info">
                    <p>{{ d.album }} - {{ d.singer }}</p>
                    <p>单价￥{{d.price}} - 库存{{d.stock}}</p>
                    <step-input :num="d.number" :max="d.stock" @change="onNumChange(i,$event)" />
               </div>
           </div>
       </div>
        <!-- 使用局部组件,传入自定义属性num和max,监听子组件派发的自定义事件change,事件回调中$event是子组件中$emit派发事件时传递出来的数据,回调函数的默认参数就是$event -->
        <!-- <step-input :num="myNum" :max="200" @change="onChange" />
        <step-input :num="myNum" :max="200" @change="myNum+=$event" /> -->
    </div>
</template>
<script>
//导入组件文件
import StepInput from '../components/StepInput.vue'
import list from './album-list.js'
//导出时使用default,导入时可随意命名变量;若不写script,Vue会加上默认的script
    export default{
        //定义局部组件
        components:{
            'step-input':StepInput
        },
        data(){
            return {
                 myNum:100,
                 list
            }
        },
        methods:{
            onChange(val){
                console.log('子组件传出来的数据是:',val);
                this.myNum +=(val*2);
            },
            onNumChange(i,val){
                this.list[i].number+=val;
            }
        },
          computed:{
                total(){
                    let number = 0;
                    let price = 0;
                    this.albumList.forEach(item=>{
                        number+=item.number;
                        price+=item.number*item.price;
                    })
                    return {
                        number,
                        price
                    }
                }
            }
    }
</script>

<style lang="sass">
    .work-1
        .item
            display: flex
            // height: 50px
            // line-height: 100px
            align-items: center
            //align-items默认值: stretch 把子元素扩展撑开
        img 
            width: 30px
            height: 30px
            border-radius: 50%
        .info 
            flex-grow: 1
        // .step-input 
        //     width: 50px
        //     height: 50px
        //     margin-right: 0
</style>
